<template>
  <div class="header fix">
    <div class="fl sub">{{ title }}</div>
    <div class="fr time">
      统计范围：
      <Input v-model="orgName" icon="arrow-down-b" placeholder="请选择" style="width: 180px;margin-right: 16px;"
             @on-focus="chooseOrg" :readonly="true"/>
      <!--<Select v-model="model1" style="width:140px;margin-right: 20px">
        <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>-->
      时期：
      <Row style="vertical-align: middle;display: inline-flex;">
        <Col span="12">
        <DatePicker type="year" :value="searchDate" style="width: 80px" format="yyyy年" :clearable="false"
                    @on-change="changeDate"></DatePicker>
        </Col>
        <Col span="12">
        <DatePicker type="month" :value="searchDate" style="width: 80px" format="M月" :clearable="false"
                    class="search-month"
                    @on-change="changeDate"></DatePicker>
        </Col>
      </Row>
      <span class="search-btn" @click="clickSearch"><i class="iconfont icon-shiliangzhinengduixiang"></i>查询</span>
    </div>

    <org v-model="showOrg" :curId="orgId" @ok="okOrg"></org>
  </div>
</template>
<script>
  import {Org} from 'wxm-pc';
  import platform from '@/data/platform.js';
  export default {
    components: {Org},
    props: ['title'],
    data() {
      return {
        orgId: null,
        orgName: null,
        searchDate: new Date(),
        showOrg: false
      }
    },
    mounted(){
      this.searchDate.setDate(1);
      this.initOrg();
    },
    methods: {
      initOrg(){
        platform.getTopOrg(this).then(rs => {
          if (rs.code == '0') {
            var org = rs.data;
            this.orgId = org.id;
            this.orgName = org.name;
            this.clickSearch();
          } else {
            this.$Message.error('组织服务异常');
          }
        });
      },
      chooseOrg(){
        this.showOrg = true;
      },
      okOrg(data){
        this.orgId = data ? data.id : null;
        this.orgName = data ? data.name : null;
      },
      clickSearch() {
        this.$emit('on-search', {
          orgId: this.orgId,
          orgName: this.orgName,
          searchDate: this.searchDate
        });
      },
      changeDate(v, type) {
        if (!v) {
          return;
        }
        console.log(v,type)
        if (type == 'year') {
          this.searchDate.setFullYear(parseInt(v));
        } else if (type == 'month') {
          this.searchDate.setMonth(parseInt(v) - 1);
        }
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .header {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    background-color: #FFFFFF;
    border-radius: 3px;
    .sub {
      line-height: 24px;
      margin: 18px 0;
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      text-indent: 8px;
      border-left: 4px #3385ff solid;
    }
    .time {
      font-size: 14px;
      .search-btn {
        font-size: 15px;
        display: inline-block;
        width: 100px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #FFFFFF;
        margin-left: 20px;
        border-radius: 5px;
        background-color: #3385ff;
        cursor: pointer;
        .icon-shiliangzhinengduixiang {
          font-size: 16px;
          vertical-align: bottom;
          display: inline-table;
          margin-left: -5px;
          margin-right: 5px;
        }
      }

    }
  }

  .ivu-col-span-12 {
    margin-right: 10px !important;
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  .search-month .ivu-date-picker-header {
    display: none;
  }
</style>
